// 引入外部异步处理函数
import { request } from "../../request/index.js";

Page({
  data: {
    // 左侧菜单数据
    leftMenuList: [],
    // 右侧菜单商品数据
    rightMenuList: [],
    // 被点击左侧菜单索引
    currentIndex: 0,
    scrollTop: 0,
  },
  // TIPS 接口返回的数据，没有包含在 data 属性的数据不能在调试工具的 AppData 中访问
  Cates: [],
  onLoad: function (options) {
    // NOTE: 利用微信小程序本地缓存减少异步请求
    // 1.判断本地缓存   2.无缓存则发新请求    3.有缓存且未过期即直接使用缓存

    /* NOTE 获取本地缓存数据 */
    const Cates = wx.getStorageSync("cates");
    if (!Cates) {
      // 无缓存，发送新请求
      this.getCates();
    } else {
      // 有缓存，还需验证过期时间(保鲜时间)
      // TIPS 注意时间的写法 10s 写为了 1000*10 可以清晰的表示代码
      if (Date.now() - Cates.time > 1000 * 10) {
        this.getCates();
      } else {
        // 缓存合法时的操作
        this.Cates = Cates.data;
        let leftMenuList = this.Cates.map((v) => v.cat_name);
        let rightMenuList = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightMenuList,
        });
      }
    }
  },

  // 获取分类数据函数
  getCates() {
    request({
      url: "/categories",
    }).then((res) => {
      this.Cates = res.data.message;

      /* NOTE 接口数据存入本地缓存，缓存的名字存取时需一致 */
      wx.setStorageSync("Cates", { time: Date.now(), data: this.Cates });

      // 构造左侧的大菜单数据
      let leftMenuList = this.Cates.map((v) => v.cat_name);
      // 构造右侧商品数据
      let rightMenuList = this.Cates[0].children;
      this.setData({
        leftMenuList,
        rightMenuList,
      });
    });
  },
  // 左侧菜单点击事件(显示不同内容)
  handleItemTap(e) {
    const { index } = e.currentTarget.dataset;
    let rightMenuList = this.Cates[index].children;
    this.setData({
      rightMenuList,
      currentIndex: index,
      scrollTop: 0,
    });
  },
});
